/** */

<template>
  <div>
    <!-- <h1>v-model, value, v-bind.value</h1> -->
    <!-- <a-input v-model="aModel" v-bind="aBind" :value="aValue" /> -->
    <h1>my input 3</h1>
    <h1>v-model:</h1>
    <MyInput4 v-model="v1" />
    <div>v1 is: {{ v1 }}</div>
    <h1>input4 no value</h1>
    <MyInput4 />
    <h1>input4 value onChange</h1>
    <MyInput4 :value="v1" @change="handleInput4Change" />
    <h1>input4 vbind von</h1>
    <MyInput4
      v-model="v3"
      :value="v2"
      v-bind="input4Info"
      v-on="input4Events"
    />
    <!-- <h1>input 4</h1> -->
    <!-- <MyInput4 v-model="v1" /> -->
    <!-- <MyInput4 :value="v1" @change="handleInput4Change" /> -->
    <!-- <h1>input 3</h1> -->
    <!-- <MyInput3 /> -->
    <!-- <div :style="{ height: '30px', marginTop: '10px' }">{{ v1 }}</div> -->
    <!-- <h1>value:</h1> -->
    <!-- <MyInput3 :value="v1" @change="handleV1Change" /> -->
    <!-- <h1>no value:</h1> -->
    <!-- <MyInput3 @change="handleNoValueChange" /> -->
    <!-- <h1>control 3:</h1> -->
    <!-- <Control3 :props="control_props" :value="control_value" /> -->
    <hr />
    <button @click="doUpdateV1">update v1</button>
    <hr />
    <div>form values: {{ this.form.getFieldsValue() }}</div>
    <a-form :form="form">
      <a-form-item label="aa">
        <a-input
          v-decorator="[
            'a',
            {
              rules: [{ required: true, message: 'Please select your a!' }],
            },
          ]"
          @change="handleControlAChange"
          :allow-clear="true"
        />
      </a-form-item>
      <a-form-item label="my input 4">
        <MyInput4
          v-decorator="[
            'b',
            {
              rules: [{ required: true, message: 'Please select your a!' }],
            },
          ]"
          v-bind="infoB"
          v-on="eventB"
        />
      </a-form-item>
      <a-form-item label="use control">
        <Control3
          v-decorator="[
            'c',
            {
              rules: [{ required: true, message: 'Please select your c!' }],
            },
          ]"
          v-bind="infoC"
          v-on="eventC"
        />
      </a-form-item>
      <!-- <a-form-item label="bb">
        <MyInput3
          v-decorator="[
            'b',
            {
              rules: [{ required: true, message: 'Please select your b!' }],
            },
          ]"
          @change="handleControlBChange"
          :allow-clear="true"
        />
      </a-form-item> -->
      <!-- <a-form-item label="control"
        ><Control3
          v-decorator="[
            'c',
            {
              rules: [{ required: true, message: '请输入 c!' }],
            },
          ]"
          type="input"
          :props="cProps"
        />
      </a-form-item> -->
    </a-form>
    <hr />
    <button @click="doUpdateForm">update form</button>
  </div>
</template>

<script>
import MyInput3 from './control/MyInput3.vue'
import MyInput4 from './control/MyInput4.vue'
import Control3 from './control/Control3.vue'

export default {
  name: 'formTest5',
  components: {
    MyInput3,
    Control3,
    MyInput4,
  },
  props: {},
  data() {
    const props_of_c = {
      allowClear: true,
      placeholder: '请输入 c',
      // change: this.handleControlCChange,
      change: this.doChange,
      // onChange: this.handleControlCChange,
    }

    const events_of_c = {
      aEvent: this.doAEvent,
    }

    const cProps = {
      placeholder: 'please input c111...',
      value: 'this is value',
      allowClear: true,
      extraProp: 'this is an extra prop',
      change: this.doChange,
    }

    const cEvents = {
      change: this.doHandleChange,
      myChange: this.doHandleMyChange,
    }

    const control_props = {
      value: 'vvvvv',
    }

    const control_value = 'value in index'
    const v1 = 'init value of v1'

    return {
      infoB: {
        allowClear: true,
        placeholder: 'please input...',
      },
      eventB: {
        doit: this.doit,
      },
      infoC: { allowClear: true, placeholder: 'please input cccc...' },
      eventC: {},
      v1,
      v2: 'v2222',
      v3: 'v333333',
      form: this.$form.createForm(this),
      props_of_c,
      events_of_c,
      cProps,
      cEvents,
      control_props,
      control_value,
      aValue: 'a value in value',
      aModel: 'a value in model',
      aBind: {
        value: 'a value in bind',
      },
      value1: 'init value1',
      input4Info: {
        value: v1,
      },
      input4Events: {
        change: this.handleInput4Change,
      },
    }
  },
  watch: {
    v1(value) {
      this.input4Info.value = value
    },
  },
  methods: {
    doUpdateV1() {
      console.log('>>> do update v1')
      this.v1 = 'new v1'
    },
    handleV1Change(newValue) {
      console.log('a:', newValue)
      this.v1 = newValue
    },
    handleNoValueChange(newValue) {
      console.log('b:', newValue)
    },
    handleControlAChange(e) {
      const value = e.target.value
      console.log('a value is:', value)
      // this.form.setFieldsValue({ b: 'new value' })
      this.form.setFieldsValue({
        // a: 'new - this is init a',
        // b: 'new - bbb',
        // c: 'new - init c',
      })
    },
    handleControlBChange(newValue) {
      // const value = e.target.value
      console.log('b value is:', newValue)
    },
    handleControlCChange(newValue) {
      console.log('this is c value:', newValue)
    },
    doChange(newValue) {
      console.log('>> 1111111 now do change:', newValue)
    },
    doAEvent(newValue) {
      console.log('>> do a event, new value:', newValue)
    },
    change_from_index(value) {
      console.log('>> this event is defined in index', value)
    },
    doUpdateForm() {
      console.log('now do update form')
      this.form.setFieldsValue({ a: 'new a', b: 'new b', c: 'init c' })
    },
    doHandleChange(value) {
      console.log('>> 222222do handle change:', value)
    },
    doHandleMyChange(value) {
      console.log('>>>>>>> 3333now handle my change:', value)
    },
    handleInput4Change(value) {
      this.v1 = value
      // console.log('>>> handle input 4 change:', value)
    },
    handleInput4Change_2(value) {
      this.input4Info.value = value
    },
    doit(value) {
      console.log('do it value is:', value)
    },
  },
  mounted() {
    // this.form.setFieldsValue({ a: 'this is init a', b: 'bbb', c: 'init c' })
  },
}
</script>

<style></style>
